<template>
  <div>
    <table width="100%" border="1" v-if="JSON.stringify(list)!=='{}'">
<!--      0离去1在线2未约3失约-->
      <tr>
        <th>学生头像</th>
        <th>学生姓名</th>
        <th>所属班级</th>
        <th v-if="tableType==1||tableType==0">总时长</th>
      </tr>
      <tr v-for="(item,index) in list" :key="index">
        <td>
          <div class="templateImgBox">
            <viewerModle type="1" :imgSrc="item.pic"></viewerModle>
          </div>
        </td>
        <td>{{ item.name }}</td>
        <td>{{ item.class?item.class:'无' }}</td>
        <td v-if="tableType==1||tableType==0">{{ item.sum_time }}</td>
      </tr>
    </table>
    <table width="100%" border="1" v-else>
      <tr>
        <th>学生头像</th>
        <th>学生姓名</th>
        <th>所属班级</th>
        <th v-if="tableType==1||tableType==0">总时长</th>
      </tr>
      <tr>
        <td :colspan="tableType==1||tableType==0?4:3">
          暂无数据
        </td>
      </tr>
    </table>
  </div>
</template>

<script>

export default {
  name: 'studentMultiple',
  props: ['studentOption','tableType'],
  data() {
    return {
      list: this.studentOption
    }
  },
  watch: {
    studentOption(val){
      console.log('变了',JSON.stringify(val))
      this.list = this.getJson(this.studentOption)
    }
  },
  created() {
  },
  methods: {
    getJson(option){
      return JSON.parse(JSON.stringify(option))
    }
  },
  mounted() {
  }
}
</script>
<style scoped>

table {
  border-collapse: collapse;
  border: solid 1px #ddd;
}

table th {
  height: 50px;
  background: #dfefff;
}

table td {
  text-align: center;
  padding: 10px;
}

.table-bordered tr td {
  border: 1px solid #ddd;
}

.table-bordered td {
  padding: 8px;
  line-height: 1.42857143;
}
</style>
